import { useEffect, useState } from 'react'
import { GetUser } from '@/api/user'
import style from './index.module.scss'
import { Row, Col, Breadcrumb, Input, Button } from 'antd'
import useSyncState from '@/utils/tongbu'

import Tables from './component/Tables'
import AddEditDialog from './component/AddEdit'
import GiveRoleBox from './component/GiveRole/index'

const User = () => {
  const [dataSource, setDataSource] = useState([])  // table数据源
  const [pageNow, setPageNow] = useSyncState(1)
  const [pageSize, setPageSize] = useState(2)
  const [total, setTotal] = useState(0)
  const [ipt, setIpt] = useState('') // 输入框输入的内容
  const [isModalOpen, setIsModalOpen] = useState(false) // 添加修改用户的盒子  
  const [dialogType, setDialogType] = useState('') // 要么是添加盒子 要么是修改盒子 
  const [userID, setUserID] = useState(0) // 要么是添加盒子 要么是修改盒子 

  const [roleBox, setRoleBox] = useState(false) // 分配角色盒子
  const [userName, setUserName] = useState('') // 用户名
  const [roleName, setRoleName] = useState('') // 用户角色
  const { Search } = Input

  // table数据初始化
  const init = async (iptValue: string, pageNow: number, pageSize: number) => {
    const res = await GetUser({query: iptValue, pagenum: pageNow, pagesize: pageSize})
    if(res.data.meta.status === 200) {
      setTotal(res.data.data.total)
      setIpt(iptValue)
      let arr: [] = []
      arr = res.data.data.users.map((item: any, index: number) => {
        return {
          key: index + 1,
          id: item.id,
          username: item.username,
          email: item.email,
          mobile: item.mobile,
          role_name: item.role_name,
          mg_state: item.mg_state
        }
      })
      setDataSource(arr)
    }
  }

  useEffect(() => {init(ipt, pageNow, pageSize)}, [])

  // 更改每页数量 或者 切换当前页 给子组件使用
  const sizeCurrentChange = (current: number, pageSize: number) => {
    setPageNow(current)
    setPageSize(pageSize)
    init(ipt, current, pageSize)
  }

  // 添加或者修改盒子 显示或者隐藏 给子组件使用
  const changeDialog = (flag: boolean, type = '') => {
    setIsModalOpen(flag)
    setDialogType(type)
  }

  // 打开编辑盒子 获取ID 给子组件使用
  const openUserID = (id: number) => {
    setUserID(id)
  }

  // 删除用户, 给子组件使用, 当前页只有一条数据的时候, 删完应该返回上一页
  const changePageNow = () => {
    setPageNow(pageNow - 1, (data: number) => {
      init(ipt, data, pageSize)
    })
  }

  // 打开分配角色盒子 给子组件使用
  const changeRoleBox = (flag: boolean, name:string, role: string) => {
    setRoleBox(flag)
    setUserName(name)
    setRoleName(role)
  }

  return (
    <>
     <Breadcrumb items={[{ title: '用户管理' }, { title: '用户列表' }]} />
     
     <div className={style.userContent}>
      {/* 搜索框 */}
      <Row gutter={20} className={style.search}>
        <Col span={5}>
          <Search placeholder="输入内容" size="large" onSearch={(value: string) => init(value, pageNow, pageSize)} allowClear/>
        </Col>
        <Col span={4}>
          <Button type='primary' size="large" onClick={() => changeDialog(true, 'add')}>添加用户</Button>
        </Col>
      </Row>

      {/* 表格 */}
      <Tables changeRoleBox={changeRoleBox} dataSource={dataSource} changePageNow={changePageNow} openUserID={openUserID} init={init} ipt={ipt} pageSize={pageSize} current={pageNow} total={total} changeDialog={changeDialog} sizeCurrentChange={sizeCurrentChange}/>
     </div>

     {/* 添加修改用户的盒子 */}
     <AddEditDialog isModalOpen={isModalOpen} changeDialog={changeDialog} userID={userID} dialogType={dialogType} init={init} pageNow={pageNow} pageSize={pageSize} ipt={ipt}/>
    
     {/* 分配角色盒子  */}
     <GiveRoleBox roleBox={roleBox} changeRoleBox={changeRoleBox} userID={userID} userName={userName} roleName={roleName} init={init} pageNow={pageNow} pageSize={pageSize} ipt={ipt}/>
    </>
  )   
}

export default User